[feature] 상세페이지 콘텐츠에 애니메이션을 추가한다 #1015
Conversation
- AnswerContainer에 CSS transition 기반 애니메이션 추가 - 조건부 렌더링 대신 max-height, opacity, padding transition 적용 - 부드러운 열림/닫힘 효과로 UX 개선
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
Warning
|
| Cohort / File(s) | 설명 |
|---|---|
FAQ 애니메이션 frontend/src/pages/ClubDetailPage/components/ClubIntroContent/ClubIntroContent.styles.ts |
AnswerContainer 시그니처를 styled.div<{ $isOpen: boolean }>로 변경. $isOpen에 따라 max-height, opacity, padding을 토글하고 overflow: hidden 및 테마 기반 transitions 사용으로 애니메이션 처리. ArrowIcon도 테마 transition 사용으로 업데이트. |
렌더링 방식 변경 frontend/src/pages/ClubDetailPage/components/ClubIntroContent/ClubIntroContent.tsx |
FAQ 답변을 조건부 렌더링에서 항상 렌더링하는 AnswerContainer로 변경하고 $isOpen prop으로 보이기 제어(토글 로직·트래킹 유지). |
탭 상태 → URL frontend/src/pages/ClubDetailPage/ClubDetailPage.tsx |
로컬 탭 상태를 URL 쿼리(useSearchParams) 기반으로 변경, TAB_TYPE 상수 추가 및 클릭 핸들러에 mixpanel 트래킹 유지. |
스타일 토큰·애니메이션 추가 frontend/src/pages/ClubDetailPage/ClubDetailPage.styles.ts, frontend/src/pages/ClubDetailPage/components/ClubFeed/ClubFeed.styles.ts, frontend/src/styles/theme/transitions.ts, frontend/src/styles/theme/index.ts |
테마에 transitions 추가(transitions.ts) 및 theme export에 포함. TabContent에 페이드인 keyframes 추가 및 컴포넌트들에서 하드코딩된 transition을 테마 토큰으로 교체. |
모의 데이터 제거 frontend/src/pages/ClubDetailPage/mockData.ts |
파일 및 mockClubApi 상수 삭제. |
MainPage nullish 수정 frontend/src/pages/MainPage/MainPage.tsx |
totalCount fallback을 data?.totalCount ?? clubs.length로 변경(기존 ` |
Sequence Diagram(s)
(생성 조건 미충족 — 생략)
Estimated code review effort
🎯 3 (Moderate) | ⏱️ ~20 minutes
Possibly related issues
- MOA-494: 상세페이지 콘텐츠 애니메이션 추가 요구사항과 일치 — TabContent 및 FAQ 애니메이션 구현과 직접 관련됩니다.
- [feature] MOA-494 상세페이지 콘텐츠에 애니메이션을 추가한다 #1014: 상세페이지 및 FAQ 애니메이션을 다루는 이슈로, 본 변경사항과 중복 목적을 가집니다.
Possibly related PRs
- [feature] 상세페이지 소개 내용 및 FAQ 컴포넌트 구현 #959 — FAQ Accordion 스타일/토글 변경과 유사한
ArrowIcon/AnswerContainer변경을 포함합니다. - [Hotfix] 백엔드 totalCount 미응답 시 clubs.length 기준으로 카드리스트 표시 처리 #826 —
MainPage의totalCountfallback을??로 변경한 점이 동일합니다. - [refactor] 디자인 시스템 기반 공통 스타일 구조 정리 및 토큰화 #946 — 테마/토큰(transition 포함) 관련 변경을 함께 다루고 있어 연관성이 높습니다.
Suggested labels
🔨 Refactor
Suggested reviewers
- lepitaaar
- oesnuj
- suhyun113
요약: FAQ 열림/닫힘 애니메이션 및 토큰 기반 transition 추가, Tab 상태의 URL 이동, mock 데이터 파일 삭제가 적용되었습니다.
🚥 Pre-merge checks | ✅ 4 | ❌ 1
❌ Failed checks (1 inconclusive)
| Check name | Status | Explanation | Resolution |
|---|---|---|---|
| Out of Scope Changes check | ❓ Inconclusive | Most changes are scope-aligned, but removing mockData.ts (43 lines) and introducing URL-based tab state management appear tangential to animation requirements. Tab persistence via URL may address a runtime issue but wasn't explicitly listed in MOA-494 objectives. | Clarify whether mockData.ts removal and URL tab state management are necessary preconditions for animation functionality, or if they should be separated into a distinct PR for scope clarity. |
✅ Passed checks (4 passed)
| Check name | Status | Explanation |
|---|---|---|
| Description Check | ✅ Passed | Check skipped - CodeRabbit’s high-level summary is enabled. |
| Title check | ✅ Passed | The PR title '[feature] 상세페이지 콘텐츠에 애니메이션을 추가한다' clearly summarizes the main change: adding animations to detail page content, which aligns with the actual changeset implementing FAQ animations and content rendering animations. |
| Linked Issues check | ✅ Passed | The PR addresses both objectives from MOA-494: FAQ 열림/닫힘 애니메이션 (implemented via AnswerContainer state management and styled transitions), and 콘텐츠 렌더링 애니메이션 (implemented via fadeIn keyframes and theme-based transitions across ClubDetailPage). |
| Docstring Coverage | ✅ Passed | No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check. |
✏️ Tip: You can configure your own custom pre-merge checks in the settings.
✨ Finishing touches
- 📝 Generate docstrings
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.
Comment @coderabbitai help to get the list of available commands and usage tips.
- TabContent에 fadeIn 애니메이션 적용 - 탭 전환 시 opacity와 translateY 효과로 부드러운 전환 - 0.3s ease-in-out transition으로 자연스러운 UX 제공
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Fix all issues with AI agents
In
@frontend/src/pages/ClubDetailPage/components/ClubIntroContent/ClubIntroContent.styles.ts:
- Around line 189-202: Replace the hardcoded magic numbers and duplicated
animation durations in AnswerContainer (and related ArrowIcon) by extracting
named constants: define ANIMATION_DURATION (e.g., '0.3s') and FAQ_MAX_HEIGHT (or
prefer grid-based approach) at the top of the module; update AnswerContainer to
use those constants for transitions and max-height (or convert the parent layout
to grid using AnswerContainer/AnswerBox with grid-template-rows toggled by
$isOpen to avoid any fixed max-height), and update media.mobile padding to reuse
the same padding constants so values aren’t repeated.
🧹 Nitpick comments (1)
frontend/src/pages/ClubDetailPage/components/ClubIntroContent/ClubIntroContent.tsx (1)
127-129: FAQ 애니메이션 구현 확인 완료, 접근성 개선 권장CSS 트랜지션을 위해 조건부 렌더링 대신 항상 렌더링하는 방식으로 변경한 것은 적절합니다. 애니메이션이 부드럽게 작동할 것으로 예상됩니다.
다만 스크린 리더 사용자를 위한 접근성 개선을 권장합니다:
♿ 접근성 개선 제안
- <Styled.QuestionRow onClick={() => handleToggleFaq(index)}> + <Styled.QuestionRow + onClick={() => handleToggleFaq(index)} + role="button" + aria-expanded={isOpen} + aria-controls={`faq-answer-${index}`} + > <Styled.QuestionText>{faq.question}</Styled.QuestionText> <Styled.ArrowIcon $isOpen={isOpen} viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg' > <path d='M6 9L12 15L18 9' stroke='currentColor' strokeWidth='2' strokeLinecap='round' strokeLinejoin='round' /> </Styled.ArrowIcon> </Styled.QuestionRow> - <Styled.AnswerContainer $isOpen={isOpen}> + <Styled.AnswerContainer + id={`faq-answer-${index}`} + $isOpen={isOpen} + aria-hidden={!isOpen} + > <Styled.AnswerBox>{faq.answer}</Styled.AnswerBox> </Styled.AnswerContainer>
📜 Review details
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Disabled knowledge base sources:
- Jira integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (3)
frontend/src/pages/ClubDetailPage/components/ClubIntroContent/ClubIntroContent.styles.tsfrontend/src/pages/ClubDetailPage/components/ClubIntroContent/ClubIntroContent.tsxfrontend/src/pages/ClubDetailPage/mockData.ts
💤 Files with no reviewable changes (1)
- frontend/src/pages/ClubDetailPage/mockData.ts
🧰 Additional context used
📓 Path-based instructions (3)
frontend/**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (frontend/.cursorrules)
frontend/**/*.{ts,tsx,js,jsx}: Replace magic numbers with named constants for clarity
Replace complex/nested ternaries withif/elseor IIFEs for readability
Assign complex boolean conditions to named variables for explicit meaning
Avoid hidden side effects; functions should only perform actions implied by their signature (Single Responsibility Principle)
Use unique and descriptive names for custom wrappers/functions to avoid ambiguity
Define constants near related logic or ensure names link them clearly to avoid silent failures
Break down broad state management into smaller, focused hooks/contexts to reduce coupling
Files:
frontend/src/pages/ClubDetailPage/components/ClubIntroContent/ClubIntroContent.styles.tsfrontend/src/pages/ClubDetailPage/components/ClubIntroContent/ClubIntroContent.tsx
frontend/**/*.{ts,tsx}
📄 CodeRabbit inference engine (frontend/.cursorrules)
Use consistent return types for similar functions/hooks
Files:
frontend/src/pages/ClubDetailPage/components/ClubIntroContent/ClubIntroContent.styles.tsfrontend/src/pages/ClubDetailPage/components/ClubIntroContent/ClubIntroContent.tsx
frontend/**/*.{tsx,jsx}
📄 CodeRabbit inference engine (frontend/.cursorrules)
frontend/**/*.{tsx,jsx}: Abstract complex logic/interactions into dedicated components/HOCs
Separate significantly different conditional UI/logic into distinct components
Colocate simple, localized logic or use inline definitions to reduce context switching
Choose field-level or form-level cohesion based on form requirements when using form libraries like react-hook-form
Use Component Composition instead of Props Drilling to reduce coupling
Files:
frontend/src/pages/ClubDetailPage/components/ClubIntroContent/ClubIntroContent.tsx
🧠 Learnings (1)
📚 Learning: 2025-11-25T14:08:23.253Z
Learnt from: CR
Repo: Moadong/moadong PR: 0
File: frontend/.cursorrules:0-0
Timestamp: 2025-11-25T14:08:23.253Z
Learning: Applies to frontend/**/*.{tsx,jsx} : Separate significantly different conditional UI/logic into distinct components
Applied to files:
frontend/src/pages/ClubDetailPage/components/ClubIntroContent/ClubIntroContent.tsx
🧬 Code graph analysis (1)
frontend/src/pages/ClubDetailPage/components/ClubIntroContent/ClubIntroContent.styles.ts (1)
frontend/src/styles/mediaQuery.ts (1)
media(8-14)
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (2)
frontend/src/pages/ClubDetailPage/ClubDetailPage.styles.ts (2)
73-86: 애니메이션 구현이 깔끔합니다. 접근성 개선을 고려해보세요.탭 전환 애니메이션이 적절하게 구현되었습니다.
opacity와transform은 GPU 가속 속성이므로 성능이 좋습니다.다만, 모션에 민감한 사용자를 위해
prefers-reduced-motion미디어 쿼리 지원을 추가하는 것을 권장합니다.♻️ 접근성 개선 제안
export const TabContent = styled.div` animation: fadeIn 0.3s ease-in-out; + @media (prefers-reduced-motion: reduce) { + animation: none; + } + @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } `;
74-74: 매직 넘버를 상수로 추출하면 유지보수성이 향상됩니다.코딩 가이드라인에 따라
0.3s와10px값을 명명된 상수로 추출하는 것을 고려해보세요.♻️ 상수 추출 제안
파일 상단에 애니메이션 상수를 정의:
import styled from 'styled-components'; import { media } from '@/styles/mediaQuery'; import { colors } from '@/styles/theme/colors'; + +const ANIMATION_DURATION = '0.3s'; +const FADE_IN_DISTANCE = '10px';그런 다음 TabContent에 적용:
export const TabContent = styled.div` - animation: fadeIn 0.3s ease-in-out; + animation: fadeIn ${ANIMATION_DURATION} ease-in-out; @keyframes fadeIn { from { opacity: 0; - transform: translateY(10px); + transform: translateY(${FADE_IN_DISTANCE}); } to { opacity: 1; transform: translateY(0); } } `;As per coding guidelines, magic numbers should be replaced with named constants for clarity.
Also applies to: 79-79
📜 Review details
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Disabled knowledge base sources:
- Jira integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (1)
frontend/src/pages/ClubDetailPage/ClubDetailPage.styles.ts
🧰 Additional context used
📓 Path-based instructions (2)
frontend/**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (frontend/.cursorrules)
frontend/**/*.{ts,tsx,js,jsx}: Replace magic numbers with named constants for clarity
Replace complex/nested ternaries withif/elseor IIFEs for readability
Assign complex boolean conditions to named variables for explicit meaning
Avoid hidden side effects; functions should only perform actions implied by their signature (Single Responsibility Principle)
Use unique and descriptive names for custom wrappers/functions to avoid ambiguity
Define constants near related logic or ensure names link them clearly to avoid silent failures
Break down broad state management into smaller, focused hooks/contexts to reduce coupling
Files:
frontend/src/pages/ClubDetailPage/ClubDetailPage.styles.ts
frontend/**/*.{ts,tsx}
📄 CodeRabbit inference engine (frontend/.cursorrules)
Use consistent return types for similar functions/hooks
Files:
frontend/src/pages/ClubDetailPage/ClubDetailPage.styles.ts
🧠 Learnings (1)
📓 Common learnings
Learnt from: seongwon030
Repo: Moadong/moadong PR: 195
File: frontend/src/pages/AdminPage/AdminPage.tsx:7-7
Timestamp: 2025-03-19T05:18:07.818Z
Learning: AdminPage.tsx에서 현재 하드코딩된 클럽 ID('67d2e3b9b15c136c6acbf20b')는 로그인 기능 구현 후 동적으로 가져오는 방식으로 수정될 예정입니다.
suhyun113
left a comment
suhyun113
left a comment
There was a problem hiding this comment.
새로고침 시 동영상에서는 활동사진 부분 애니메이션이 잘 보이는데,
저는 새로고침하면 활동사진에서 소개내용으로 이동하네요 활동사진 애니메이션은 어떻게 확인하나요?
수고하셨슴당~
frontend/src/pages/ClubDetailPage/components/ClubIntroContent/ClubIntroContent.styles.ts
Show resolved
Hide resolved
지금 소개내용 | 활동사진 탭이 useState로 관리되고 있어서 새로고침 시에도 초기값인 'intro'로 다시 되돌아오네요. |
- theme/transitions.ts 추가 (duration, easing 상수) - 0.3s → transitions.duration.normal 교체
- useSearchParams로 탭 상태 관리 - TAB_TYPE 상수 분리 및 타입 안정성 향상 - onClick 핸들러 useCallback 메모이제이션
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Fix all issues with AI agents
In
@frontend/src/pages/ClubDetailPage/components/ClubIntroContent/ClubIntroContent.styles.ts:
- Around line 191-204: The current AnswerContainer uses a hardcoded max-height
and opacity transitions which can clip content >500px and cause layout
thrashing; replace the max-height approach by switching to a grid-based
collapse: make AnswerContainer use display: grid and animate grid-template-rows
between '0fr' and '1fr' with overflow:hidden and keep padding handled
responsively, and introduce an inner AnswerBox (or reuse existing content
wrapper) with min-height:0 to allow proper collapsing; update styles that
reference AnswerContainer padding for mobile media queries accordingly or move
padding to AnswerBox so the grid rows animate cleanly.
📜 Review details
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Disabled knowledge base sources:
- Jira integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (7)
frontend/src/pages/ClubDetailPage/ClubDetailPage.styles.tsfrontend/src/pages/ClubDetailPage/ClubDetailPage.tsxfrontend/src/pages/ClubDetailPage/components/ClubFeed/ClubFeed.styles.tsfrontend/src/pages/ClubDetailPage/components/ClubIntroContent/ClubIntroContent.styles.tsfrontend/src/pages/MainPage/MainPage.tsxfrontend/src/styles/theme/index.tsfrontend/src/styles/theme/transitions.ts
💤 Files with no reviewable changes (1)
- frontend/src/pages/MainPage/MainPage.tsx
🚧 Files skipped from review as they are similar to previous changes (1)
- frontend/src/pages/ClubDetailPage/ClubDetailPage.styles.ts
🧰 Additional context used
📓 Path-based instructions (3)
frontend/**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (frontend/.cursorrules)
frontend/**/*.{ts,tsx,js,jsx}: Replace magic numbers with named constants for clarity
Replace complex/nested ternaries withif/elseor IIFEs for readability
Assign complex boolean conditions to named variables for explicit meaning
Avoid hidden side effects; functions should only perform actions implied by their signature (Single Responsibility Principle)
Use unique and descriptive names for custom wrappers/functions to avoid ambiguity
Define constants near related logic or ensure names link them clearly to avoid silent failures
Break down broad state management into smaller, focused hooks/contexts to reduce coupling
Files:
frontend/src/pages/ClubDetailPage/components/ClubFeed/ClubFeed.styles.tsfrontend/src/pages/ClubDetailPage/components/ClubIntroContent/ClubIntroContent.styles.tsfrontend/src/styles/theme/index.tsfrontend/src/pages/ClubDetailPage/ClubDetailPage.tsxfrontend/src/styles/theme/transitions.ts
frontend/**/*.{ts,tsx}
📄 CodeRabbit inference engine (frontend/.cursorrules)
Use consistent return types for similar functions/hooks
Files:
frontend/src/pages/ClubDetailPage/components/ClubFeed/ClubFeed.styles.tsfrontend/src/pages/ClubDetailPage/components/ClubIntroContent/ClubIntroContent.styles.tsfrontend/src/styles/theme/index.tsfrontend/src/pages/ClubDetailPage/ClubDetailPage.tsxfrontend/src/styles/theme/transitions.ts
frontend/**/*.{tsx,jsx}
📄 CodeRabbit inference engine (frontend/.cursorrules)
frontend/**/*.{tsx,jsx}: Abstract complex logic/interactions into dedicated components/HOCs
Separate significantly different conditional UI/logic into distinct components
Colocate simple, localized logic or use inline definitions to reduce context switching
Choose field-level or form-level cohesion based on form requirements when using form libraries like react-hook-form
Use Component Composition instead of Props Drilling to reduce coupling
Files:
frontend/src/pages/ClubDetailPage/ClubDetailPage.tsx
🧠 Learnings (7)
📓 Common learnings
Learnt from: seongwon030
Repo: Moadong/moadong PR: 195
File: frontend/src/pages/AdminPage/AdminPage.tsx:7-7
Timestamp: 2025-03-19T05:18:07.818Z
Learning: AdminPage.tsx에서 현재 하드코딩된 클럽 ID('67d2e3b9b15c136c6acbf20b')는 로그인 기능 구현 후 동적으로 가져오는 방식으로 수정될 예정입니다.
📚 Learning: 2025-11-25T14:08:23.253Z
Learnt from: CR
Repo: Moadong/moadong PR: 0
File: frontend/.cursorrules:0-0
Timestamp: 2025-11-25T14:08:23.253Z
Learning: Applies to frontend/**/*.{ts,tsx,js,jsx} : Replace magic numbers with named constants for clarity
Applied to files:
frontend/src/pages/ClubDetailPage/components/ClubIntroContent/ClubIntroContent.styles.tsfrontend/src/pages/ClubDetailPage/ClubDetailPage.tsxfrontend/src/styles/theme/transitions.ts
📚 Learning: 2025-03-19T05:18:07.818Z
Learnt from: seongwon030
Repo: Moadong/moadong PR: 195
File: frontend/src/pages/AdminPage/AdminPage.tsx:7-7
Timestamp: 2025-03-19T05:18:07.818Z
Learning: AdminPage.tsx에서 현재 하드코딩된 클럽 ID('67d2e3b9b15c136c6acbf20b')는 로그인 기능 구현 후 동적으로 가져오는 방식으로 수정될 예정입니다.
Applied to files:
frontend/src/pages/ClubDetailPage/ClubDetailPage.tsx
📚 Learning: 2025-11-25T14:08:23.253Z
Learnt from: CR
Repo: Moadong/moadong PR: 0
File: frontend/.cursorrules:0-0
Timestamp: 2025-11-25T14:08:23.253Z
Learning: Applies to frontend/**/*.{ts,tsx,js,jsx} : Break down broad state management into smaller, focused hooks/contexts to reduce coupling
Applied to files:
frontend/src/pages/ClubDetailPage/ClubDetailPage.tsx
📚 Learning: 2025-11-25T14:08:23.253Z
Learnt from: CR
Repo: Moadong/moadong PR: 0
File: frontend/.cursorrules:0-0
Timestamp: 2025-11-25T14:08:23.253Z
Learning: Applies to frontend/**/*.{tsx,jsx} : Abstract complex logic/interactions into dedicated components/HOCs
Applied to files:
frontend/src/pages/ClubDetailPage/ClubDetailPage.tsx
📚 Learning: 2025-11-25T14:08:23.253Z
Learnt from: CR
Repo: Moadong/moadong PR: 0
File: frontend/.cursorrules:0-0
Timestamp: 2025-11-25T14:08:23.253Z
Learning: Applies to frontend/**/*.{tsx,jsx} : Colocate simple, localized logic or use inline definitions to reduce context switching
Applied to files:
frontend/src/pages/ClubDetailPage/ClubDetailPage.tsx
📚 Learning: 2025-11-25T14:08:23.253Z
Learnt from: CR
Repo: Moadong/moadong PR: 0
File: frontend/.cursorrules:0-0
Timestamp: 2025-11-25T14:08:23.253Z
Learning: Applies to frontend/**/*.{ts,tsx,js,jsx} : Define constants near related logic or ensure names link them clearly to avoid silent failures
Applied to files:
frontend/src/styles/theme/transitions.ts
🧬 Code graph analysis (3)
frontend/src/pages/ClubDetailPage/components/ClubFeed/ClubFeed.styles.ts (1)
frontend/src/styles/theme/transitions.ts (1)
transitions(1-13)
frontend/src/pages/ClubDetailPage/components/ClubIntroContent/ClubIntroContent.styles.ts (2)
frontend/src/styles/theme/transitions.ts (1)
transitions(1-13)frontend/src/styles/mediaQuery.ts (1)
media(8-14)
frontend/src/pages/ClubDetailPage/ClubDetailPage.tsx (1)
frontend/src/constants/eventName.ts (2)
PAGE_VIEW(90-104)USER_EVENT(1-44)
🔇 Additional comments (8)
frontend/src/pages/ClubDetailPage/ClubDetailPage.tsx (4)
16-22: 탭 타입을 상수로 정의한 것이 좋습니다.매직 스트링을 명명된 상수로 교체하여 코드의 가독성과 유지보수성이 향상되었습니다. 타입 안전성도 확보되었습니다.
24-32: URL 기반 탭 상태 관리로 새로고침 문제를 해결했습니다.PR 코멘트에서 언급된 새로고침 시 intro 탭으로 돌아가는 문제가 URL 쿼리 파라미터 방식으로 해결되었습니다. 유효성 검사도 적절하게 구현되어 있습니다.
76-87: 상수를 일관되게 사용하여 코드 품질이 향상되었습니다.문자열 리터럴 대신
TAB_TYPE상수를 일관되게 사용하여 오타 가능성을 제거하고 타입 안전성을 확보했습니다.
41-49:trackEvent는 이미 안정적입니다. 코드는 올바른 구현입니다.
useMixpanelTrack훅이trackEvent를 빈 의존성 배열[]을 가진useCallback으로 감싸고 있으므로,trackEvent는 모든 렌더링에서 동일한 함수 참조를 반환합니다. 따라서handleIntroTabClick과handlePhotosTabClick의useCallback의존성 배열에trackEvent를 포함하는 것은 정확하며, 메모이제이션이 제대로 작동합니다.frontend/src/pages/ClubDetailPage/components/ClubFeed/ClubFeed.styles.ts (1)
4-4: 테마 기반 transition으로 리팩토링한 것이 좋습니다.하드코딩된
0.3s ease대신 테마 토큰을 사용하여 일관성을 확보했습니다. 코딩 가이드라인(매직 넘버를 명명된 상수로 교체)을 잘 따랐습니다.Based on coding guidelines, this change aligns with the requirement to replace magic numbers with named constants.
Also applies to: 26-26
frontend/src/styles/theme/index.ts (1)
2-2: 테마에 transitions를 추가한 것이 적절합니다.전역 스타일 토큰으로 transitions를 사용할 수 있게 되어 일관된 애니메이션 적용이 가능해졌습니다.
Also applies to: 8-8
frontend/src/styles/theme/transitions.ts (1)
1-13: transition 상수를 체계적으로 정의했습니다.duration과 easing을 분리하여 명확하게 구조화했고,
as const를 사용해 타입 안전성을 확보했습니다. 코딩 가이드라인에 따라 매직 넘버를 명명된 상수로 잘 교체했습니다.Based on coding guidelines, this properly defines constants near related logic with clear names.
frontend/src/pages/ClubDetailPage/components/ClubIntroContent/ClubIntroContent.styles.ts (1)
185-186: 테마 기반 transition을 사용한 것이 좋습니다.ArrowIcon의 회전 애니메이션에 테마 토큰을 사용하여 일관성을 확보했습니다.
frontend/src/pages/ClubDetailPage/components/ClubIntroContent/ClubIntroContent.styles.ts
Show resolved
Hide resolved
seongwon030
deleted the
feature/#1014-detail-page-content-animation-MOA-494
branch
#️⃣연관된 이슈
📝작업 내용
2026-01-09.5.17.55.mov
중점적으로 리뷰받고 싶은 부분(선택)
논의하고 싶은 부분(선택)
🫡 참고사항
Summary by CodeRabbit
릴리스 노트
새 기능
리팩토링
스타일
잡무(Chore)
✏️ Tip: You can customize this high-level summary in your review settings.